<template style="background-color: rgb(240, 240, 240);">
  <div id="root" class="container" style="margin-top: 50px;">
    <div class="row clearfix">
        <div class="col-md-12 column"
             style="border: 10px solid rgb(250, 250, 250); margin: 5px;margin-top: 20%; background-color: rgb(255, 255, 255);">
            <img height="70" width="80" alt="" style="clear: both;display: block;margin: auto;" src="../../public/logo.png"
                 class="img-circle aligncenter"/>
            <h3 class="text-center">
                请绑定账号
            </h3>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="workNo" class="col-sm-2 control-label">工 号</label>
                    <div class="col-sm-10">
                        <input v-model="workNo" type="email" class="form-control" id="workNo"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword" class="col-sm-2 control-label text-left">密 码</label>
                    <div class="col-sm-10">
                        <input v-model="password" type="password" class="form-control" id="inputPassword"/>
                    </div>
                </div>

                <div class="form-group" style="margin-top: 30px;">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button @click="bind" type="button" class="btn btn-primary btn-block">绑定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</template>

<script>
import {
  interface_ip_port,
  getParams,
  isEmpty,
} from "../services/addr.config";
export default {
  name: "Bind",
  data() {
    return {
      workNo: "", //工号
      password: "", //密码
      code: "", //微信认证的code
    };
  },
  methods: {
    //绑定函数
    bind() {
      let regWorkNo = new RegExp("^0[0-9]{4}$"); //检验输入工号，必须为5个数字
      let regPwd = new RegExp("^.{6,}$"); //检验输入密码，大雨6个字符
      //检验输入
      if (!regWorkNo.test(this.workNo)) {
        alert("请输入正确的工号！");
        return;
      }
      if (!regPwd.test(this.password)) {
        alert("请输入正确的密码！");
        return;
      }
      if (!isEmpty(this.code)) {
        alert("code为空");
        return;
      }
      let data = {
        code: this.code,
        workNo: this.workNo,
        password: this.password,
      };
      this.$axios({
        method: "post",
        url: `${interface_ip_port}/sys/wx/bind`,
        data: data,
      }).then((res) => {
        if (res.data.success) {
          //清空页面，只保留一个绑定成功四个字，模拟跳转
          let rootDiv = document.getElementById("root");
          rootDiv.innerHTML =
            "<h1  style='text-align: center;margin-top:10%'>绑定成功</h1>";
        } else {
          alert(res.data.message);
        }
      });
    },
  },
  //vm挂载完毕
  mounted() {
    /*
        vm加载完毕后首先从路径中获取参数code，
        此页面为微信认证后的回调页面（在ipc备案的域名下），微信认证是为了拿到code，后端通过code获取用户opedID
    */
    this.code = getParams("code");
    console.log("微信code====>", this.code);
  },
};
</script>

<style>
</style>